<script setup lang="ts">
import { getTaskProcessDataApi } from "@/api/task"
import { EvalProcessEvaData } from "@/api/task/types/static-task"
import { LineOptionStrategy } from "@/components/Charts"
import { useECharts } from "@/hooks/useECharts"
import { LineSeriesOption } from "echarts"
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"

interface Props {
  id: string | undefined
  taskStatus: number | undefined
  taskProcess: number | undefined
}
const props = defineProps<Props>()

let timer: number | null = null
const taskId = ref<string | undefined>(props.id)
const taskStatus = ref<number | undefined>(props.taskStatus)
const MapElRef = ref<HTMLElement | null>(null)
const state = reactive<{
  round: number[]
  type: string | undefined
  path: string | undefined
  MAP: number[]
}>({
  round: [],
  type: undefined,
  path: undefined,
  MAP: []
})

const MapChart = useECharts(
  MapElRef,
  new LineOptionStrategy().getOptions({
    title: {
      text: "Map曲线"
    },
    xAxis: {
      name: "轮数",
      data: state.round
    },
    yAxis: {
      name: "Map"
    },
    series: [
      {
        data: state.MAP
      }
    ]
  })
)

const getTaskProcessData = () => {
  getTaskProcessDataApi(taskId.value as string)
    .then(({ data }) => {
      data.forEach((item) => {
        state.round.push(item.round)
        const processEva: EvalProcessEvaData = JSON.parse(item.process_eva)
        state.type = processEva.type
        state.path = processEva.path
        state.MAP.push(processEva.MAP)
      })
    })
    .finally(() => {
      // 召回率
      MapChart.options.series && ((MapChart.options.series as LineSeriesOption[])[0].data = state.MAP)
      // @ts-ignore
      MapChart.options.xAxis && (MapChart.options.xAxis.data = state.round)
    })
}

const resize = () => {
  MapChart.handleResize()
}

watch(
  () => props.taskStatus,
  () => {
    taskStatus.value = props.taskStatus
    getTaskProcessData()
  }
)

onMounted(() => {
  getTaskProcessData()
  timer = Number(
    setInterval(() => {
      if (taskStatus.value == 1) {
        getTaskProcessData()
      }
    }, 1000 * 60)
  )
})
onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

defineExpose({ resize })
</script>

<template>
  <div v-if="state.path != undefined" class="title">
    <el-icon :size="32"><PictureRounded /></el-icon>
    <h3>文件</h3>
  </div>
  <el-row v-if="state.path != undefined" :gutter="20">
    <el-col class="mb-6" :span="24">
      <el-card shadow="never"> 图片存储路径：{{ state.path }} </el-card>
    </el-col>
  </el-row>
  <div class="title">
    <svg-icon name="eval-perception" />
    <h3>Map曲线</h3>
  </div>
  <el-row>
    <el-col class="mb-6" :span="24">
      <el-card shadow="never">
        <div ref="MapElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 42px;
  .svg-icon {
    width: 2em;
    height: 2em;
  }
  h3 {
    margin-left: 10px;
  }
}

.chart-card {
  height: calc(100vh - 530px);
  width: 100%;
  min-height: 300px;
}
</style>
